import { createRouter, createWebHistory } from "vue-router";

// 导入组件
import HomeView from "../views/HomeView.vue";
import AboutView from "../views/AboutView.vue";

/* 导入自己的页面组件 */
import FilmView from "../views/FilmView.vue";
import CinemaView from "../views/CinemaView.vue";
import NewsView from "../views/NewsView.vue";
import MineView from "../views/MineView.vue";
import AxiosDemo from "../../demos/AxiosDemo.vue";

import NowPlaying from "../components/film/NowPlaying.vue";
import ComingSoon from "../components/film/ComingSoon.vue";
import Detail from "../components/film/Detail.vue";
import NotFound from "../views/NotFound.vue";
import CitySelection from "../views/CitySelection.vue";

/* 全局路由器 */
const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),

   /* 路由表 */
   routes: [
      /* 定义路由 */
      {
         path: "/film",
         redirect: "/film/nowPlaying",
      },

      /* 电影页 */
      {
         /* 父级路由 */
         path: "/film",
         name: "film",
         meta: { title: "电影", isTabPage: true },
         component: FilmView,

         children: [
            {
               // 当 /film/nowPlaying 匹配成功
               // NowPlaying 将被渲染到 FilmView 的 <router-view> 内部
               path: "nowPlaying",
               component: NowPlaying,
            },
            {
               // 当 /film/comingSoon 匹配成功
               // ComingSoon 将被渲染到 FilmView 的 <router-view> 内部
               path: "comingSoon",
               component: ComingSoon,
            },
         ],
      },

      {
         path: "/film/:id(\\d{4})",
         name: "detail",
         meta: { hideNavBar: true, hideTabBar: true },
         component: Detail,
      },

      /* 影院页 */
      {
         path: "/cinema",
         name: "cinema",
         meta: { title: "影院", isTabPage: true },
         component: CinemaView,
      },

      /* 资讯页 */
      {
         path: "/news",
         name: "news",
         meta: { title: "资讯", isTabPage: true },
         component: NewsView,
      },

      /* 我的 */
      {
         path: "/mine",
         name: "mine",
         meta: { title: "我的", hideNavBar: true, isTabPage: true },
         component: MineView,
      },

      {
         path: "/demos/axios",
         name: "axios",
         component: AxiosDemo,
      },

      {
         path: "/cities",
         name: "cities",
         meta: { title: "当前城市-", hideTabBar: true },
         component: CitySelection,
      },

      /* 404 */
      // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
      // abc/def
      { path: "/:pm(.*)*", name: "NotFound", component: NotFound },
   ],
});

// 对外导出路由器
export default router;
